<template>
  <div class="main-container">
    <a-card class="layout-card">
      <template #title>
        <span style="font-weight: 700">评阅异常 </span>
        <a-button type="primary" class="ml-10px" size="sime" @click="subFuncatio">
          自定义评阅异常
        </a-button>
      </template>
      <label>系统内置评阅异常：</label>
      <a-tag
        :color="item.reasonFlag ? 'red' : 'blue'"
        v-for="(item, index) in sysSubjectForm"
        :key="item.autoId"
        class="!mb-5px"
      >
        {{ item.ycName }}
        <!-- <template #icon>
          <close-circle-outlined @click="closeLog(item, index)" class="cursor-pointer" />
        </template> -->
      </a-tag>
      <div class="!m-1">
        <label>自定义评阅异常：</label>
        <a-tag
          :color="item.reasonFlag ? 'red' : 'blue'"
          v-for="(item, index) in addSubjectForm"
          :key="item.autoId"
          class="!mb-5px"
        >
          {{ item.ycName }}
          <template #icon>
            <close-circle-outlined @click="closeLog(item, index)" class="cursor-pointer" />
            <edit-outlined @click="editLog(item, index)" class="cursor-pointer" />
          </template>
        </a-tag>
      </div>
      <div>
        <label>注：</label>
        <span class="!pr-5 text-[#CF1322]">
          “&nbsp;&nbsp;<a-tag color="red"> &nbsp;</a-tag>” 表示异常备注必填
        </span>
        <span class="!pr-5 text-[#096DD9]">
          “&nbsp;&nbsp;<a-tag color="blue"> &nbsp;</a-tag>” 蓝色表示异常备注非必填
        </span>
      </div>
    </a-card>
  </div>

  <a-modal
    width="300"
    :visible="abnormalVisible"
    @cancel="cancelAbnormalModal"
    @ok="setAbnormalModal"
    title="设置评阅异常"
  >
    <a-row align="middle">
      <a-col :span="24" style="padding: 20px 10px">
        <form @submit="setAbnormalModal">
          <label>异常状态名称：</label>
          <a-input
            v-model:value="abnormalObj.ycName"
            placeholder="请输入评阅异常名称"
            style="width: 70%"
          />
          <div class="mb-5"></div>
          <label>异常备注是否必填：</label>
          <a-switch
            v-model:checked="abnormalObj.reasonFlag"
            checked-children="是"
            un-checked-children="否"
          />
        </form>
      </a-col>
    </a-row>
  </a-modal>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getYcztConfigList, addYcztConfig, delYcztConfig } from '/@/api/system-manage/teacher-info'

import { cloneDeep } from 'lodash-es'
const addSubjectForm = ref<any>([])
const sysSubjectForm = ref<any>([])
import { useMessage } from '/@/hooks/web/useMessage'
const { createMessage } = useMessage()

/**
 * 新增评阅异常弹窗状态
 */

const abnormalVisible = ref<Boolean>(false)

const abnormalObj = ref<any>({
  ycName: '',
  reasonFlag: false, //异常备注是否必填标志
})

/**
 * 关闭评阅异常弹窗
 */
function cancelAbnormalModal() {
  abnormalVisible.value = false
  abnormalObj.value = {
    reasonFlag: false
  }
}
/**
 * 编辑评阅异常弹窗
 */
async function setAbnormalModal(e) {
  e.preventDefault()
  if (abnormalObj.value.ycName == '') return createMessage.warning('请输入评阅异常名称')
  let { code, message } = await addYcztConfig(abnormalObj.value)
  if (code == 200) {
    createMessage.success(abnormalObj.value.autoId ? '编辑成功' : '添加成功')
    cancelAbnormalModal()
    getInfobox()
  } else {
    createMessage.error(message)
  }
}

/**
 * 删除评阅异常
 */
async function closeLog(item, index) {
  let { code, message } = await delYcztConfig({ autoId: item.autoId })
  if (code == 200) {
    createMessage.success('删除成功')
    addSubjectForm.value.splice(index, 1)
  } else {
    createMessage.error(message)
  }
}

/**
 * 编辑评阅异常
 */
function editLog(item, index) {
  abnormalVisible.value = true
  abnormalObj.value = cloneDeep(item)
}

/**
 * 添加评阅异常弹窗
 */
const subFuncatio = async () => {
  abnormalVisible.value = true
}
/**
 * 获取评阅评阅异常
 * @param prames
 */
const getInfobox = async () => {
  let { code, message, data } = await getYcztConfigList({})
  if (code == 200) {
    sysSubjectForm.value = []
    addSubjectForm.value = []
    data.forEach((item: any) => {
      if (item.createType == 'SYS') {
        sysSubjectForm.value.push(item)
      } else {
        addSubjectForm.value.push(item)
      }
    })
  } else {
    createMessage.error(message)
  }
}

onMounted(() => {
  getInfobox()
})
</script>

<style lang="less" scoped>
.main-container {
  // height: @c_height;
  .layout-card {
    height: 100%;
    border-radius: 8px;
    margin-bottom: 30px;
  }
}
</style>
